<div class="i18n-guide-content">
  <h1>国际化指南</h1>
  <p>展示如何使用 ngx-translate 进行国际化开发</p>
  
  <!-- 语言切换 -->
  <div class="card">
    <h3>语言切换</h3>
    <div class="language-switch">
      <button mat-raised-button 
              [color]="currentLang === 'zh_CN' ? 'primary' : ''"
              (click)="switchLanguage('zh_CN')">
        中文
      </button>
      <button mat-raised-button 
              [color]="currentLang === 'en_US' ? 'primary' : ''"
              (click)="switchLanguage('en_US')">
        English
      </button>
    </div>
    <p class="current-lang">当前语言: {{ currentLang }}</p>
  </div>
  
  <!-- 基础文本翻译 -->
  <div class="card">
    <h3>1. 基础文本翻译</h3>
    <div class="demo-item">
      <div class="demo-result">
        <p>{{ 'access.unauthorized' | translate }}</p>
        <p>{{ 'action.save' | translate }}</p>
      </div>
      <div class="code-example">
        <h4>HTML 代码：</h4>
        <pre><code>{{ codeExamples.basicHtml }}</code></pre>
      </div>
    </div>
  </div>

  <!-- 变量插值 -->
  <div class="card">
    <h3>2. 变量插值</h3>
    <div class="demo-item">
      <div class="demo-result">
        <p>{{ 'action.share-via' | translate: {provider: '微信'} }}</p>
        <p>{{ 'common.phone-input-pattern' | translate: {phoneNumber: '+8613800138000'} }}</p>
      </div>
      <div class="code-example">
        <h4>HTML 代码：</h4>
        <pre><code>{{ codeExamples.interpolationHtml }}</code></pre>
        <h4>JSON 配置：</h4>
        <pre><code>{{ codeExamples.interpolationJson }}</code></pre>
      </div>
    </div>
  </div>

  <!-- 嵌套对象访问 -->
  <div class="card">
    <h3>3. 嵌套对象访问</h3>
    <div class="demo-item">
      <div class="demo-result">
        <p>{{ 'admin.device-connectivity.mqtt.mqtt-broker' | translate }}</p>
        <p>{{ 'alarm.search-status.active' | translate }}</p>
      </div>
      <div class="code-example">
        <h4>HTML 代码：</h4>
        <pre><code>{{ codeExamples.nestedHtml }}</code></pre>
        <h4>JSON 配置：</h4>
        <pre><code>{{ codeExamples.nestedJson }}</code></pre>
      </div>
    </div>
  </div>

  <!-- HTML标签支持 -->
  <div class="card">
    <h3>4. HTML标签支持</h3>
    <div class="demo-item">
      <div class="demo-result">
        <p [innerHTML]="'common.html-message' | translate"></p>
        <p [innerHTML]="'common.duplicate-alias-error' | translate: {alias: 'device-001'}"></p>
      </div>
      <div class="code-example">
        <h4>HTML 代码：</h4>
        <pre><code>{{ codeExamples.htmlSupportHtml }}</code></pre>
        <h4>JSON 配置：</h4>
        <pre><code>{{ codeExamples.htmlSupportJson }}</code></pre>
      </div>
    </div>
  </div>

  <!-- 复数形式 -->
  <div class="card">
    <h3>5. 复数形式支持</h3>
    <div class="demo-item">
      <div class="demo-result">
        <p>{{ 'alarm.selected-alarms' | translate: {count: 1} }}</p>
        <p>{{ 'alarm.selected-alarms' | translate: {count: 5} }}</p>
        <p>{{ 'alarm.selected-alarms' | translate: {count: 0} }}</p>
      </div>
      <div class="code-example">
        <h4>HTML 代码：</h4>
        <pre><code>{{ codeExamples.pluralHtml }}</code></pre>
        <h4>JSON 配置：</h4>
        <pre><code>{{ codeExamples.pluralJson }}</code></pre>
      </div>
    </div>
  </div>

  <!-- 复杂HTML与变量组合 -->
  <div class="card">
    <h3>6. 复杂HTML与变量组合</h3>
    <div class="demo-item">
      <div class="demo-result">
        <p [innerHTML]="'common.public-dashboard-text' | translate: {dashboardTitle: '我的仪表板', publicLink: 'https://example.com'}"></p>
        <p [innerHTML]="'alarm.create-alarm-pattern' | translate: {alarmType: '温度告警'}"></p>
      </div>
      <div class="code-example">
        <h4>HTML 代码：</h4>
        <pre><code>{{ codeExamples.complexHtml }}</code></pre>
        <h4>JSON 配置：</h4>
        <pre><code>{{ codeExamples.complexJson }}</code></pre>
      </div>
    </div>
  </div>

  <!-- 特殊字符 -->
  <div class="card">
    <h3>7. 特殊字符处理</h3>
    <div class="demo-item">
      <div class="demo-result">
        <p>{{ 'common.quotes-and-special-chars' | translate }}</p>
      </div>
      <div class="code-example">
        <h4>HTML 代码：</h4>
        <pre><code>{{ codeExamples.specialCharsHtml }}</code></pre>
        <h4>JSON 配置：</h4>
        <pre><code>{{ codeExamples.specialCharsJson }}</code></pre>
      </div>
    </div>
  </div>

  <!-- 链接和URL -->
  <div class="card">
    <h3>8. 链接和URL</h3>
    <div class="demo-item">
      <div class="demo-result">
        <p [innerHTML]="'common.activation-link-text' | translate: {activationLink: 'https://example.com/activate'}"></p>
      </div>
      <div class="code-example">
        <h4>HTML 代码：</h4>
        <pre><code>{{ codeExamples.linkHtml }}</code></pre>
        <h4>JSON 配置：</h4>
        <pre><code>{{ codeExamples.linkJson }}</code></pre>
      </div>
    </div>
  </div>

  <!-- 代码示例 -->
  <div class="card">
    <h3>9. 代码示例</h3>
    <div class="demo-item">
      <div class="demo-result">
        <div [innerHTML]="'common.content-before' | translate"></div>
      </div>
      <div class="code-example">
        <h4>HTML 代码：</h4>
        <pre><code>{{ codeExamples.codeExampleHtml }}</code></pre>
        <h4>JSON 配置：</h4>
        <pre><code>{{ codeExamples.codeExampleJson }}</code></pre>
      </div>
    </div>
  </div>

  <!-- 缺失翻译示例 -->
  <div class="card">
    <h3>10. 缺失翻译示例</h3>
    <div class="demo-item">
      <div class="demo-result">
        <h4>缺失的翻译键:</h4>
        <p class="translation-text">{{ 'non-existent-key' | translate }}</p>
        <p class="description">当翻译键不存在时，会显示键名本身</p>
      </div>
      <div class="code-example">
        <h4>HTML 代码：</h4>
        <pre><code>{{ codeExamples.missingHtml }}</code></pre>
        <h4>说明：</h4>
        <pre><code>{{ codeExamples.missingComment }}</code></pre>
      </div>
    </div>
  </div>
</div>